<script lang="ts" setup>
const props = defineProps<{
  duration?: number;
}>();
const show = defineModel({ default: false });
const indicator = h('i', { class: 'i-svg-spinners:ring-resize  text-brand' });

watch(() => props.duration, (v) => {
  if (v && show.value) {
    setTimeout(() => {
      show.value = false;
    }, v);
  }
}, {
  immediate: true,
});
</script>

<template>
  <div v-if="show" class="fixed left-0 top-0 h-full w-full flex-center bg-dark/60">
    <ASpin :indicator="indicator" />
  </div>
</template>
